<template>
  <div class="user-profile">
    <a-row :gutter="[24, 24]">
      <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
        <div class="profile-card">
          <div class="avatar-wrapper">
            <img :src="userInfo.avatar" :alt="userInfo.username" class="user-avatar"/>
          </div>
          <h2 class="username">{{ userInfo.username }}</h2>
          <p class="user-title">{{ userInfo.title }}</p>
          <div class="user-tags">
            <a-tag color="blue">{{ userInfo.school }}</a-tag>
            <a-tag color="green">{{ userInfo.major }}</a-tag>
            <a-tag color="orange">{{ userInfo.grade }}</a-tag>
          </div>
          <div class="user-stats">
            <div class="stat-item">
              <h3>发布商品</h3>
              <p>23</p>
            </div>
            <div class="stat-item">
              <h3>关注者</h3>
              <p>1.2k</p>
            </div>
            <div class="stat-item">
              <h3>评分</h3>
              <p>4.8</p>
            </div>
          </div>
        </div>
      </a-col>
      <a-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
        <a-card :bordered="false" class="info-card">
          <template #title>
            <div class="card-title">个人信息</div>
          </template>
          <template #extra>
            <a-button v-if="!isEditing" type="primary" @click="startEditing" class="edit-button">
              编辑资料
            </a-button>
          </template>
          <div v-if="!isEditing" class="user-info">
            <div v-for="(value, key) in userInfoDisplay" :key="key" class="info-item">
              <span class="info-label">{{ labels[key] }}:</span>
              <span class="info-value">{{ value }}</span>
            </div>
          </div>
          <div v-else class="edit-form">
            <a-form :model="editForm" @finish="saveChanges" layout="vertical">
              <a-row :gutter="16">
                <a-col :span="12" v-for="(value, key) in editForm" :key="key">
                  <a-form-item :name="key" :label="labels[key]">
                    <a-input v-model:value="editForm[key]"/>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-form-item>
                <a-button type="primary" html-type="submit" class="save-button">保存</a-button>
                <a-button @click="cancelEditing" class="cancel-button">取消</a-button>
              </a-form-item>
            </a-form>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { reactive, ref, computed } from 'vue';
import { useUserStore } from "@/stores/index.js";
import { message } from "ant-design-vue";
import { storeToRefs } from 'pinia';

const userStore = useUserStore();
const { saveUserInfo } = userStore;
const { userInfo: storeUserInfo } = storeToRefs(userStore);

const userId = computed(() => storeUserInfo.value.userId);

const userInfo = computed(() => ({
  ...storeUserInfo.value,
  avatar: storeUserInfo.value.avatar || 'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
  major: storeUserInfo.value.major || '计算机科学与技术',
  school: storeUserInfo.value.school || '清华大学',
  grade: storeUserInfo.value.grade || '大三',
  title: storeUserInfo.value.title || '计算机科学学生',
}));

const labels = {
  username: '用户名',
  title: '头衔',
  email: '邮箱',
  phone: '手机号',
  school: '学校',
  major: '专业',
  grade: '年级',
  avatar: '头像'
};

const isEditing = ref(false);
const editForm = reactive({});

const userInfoDisplay = computed(() => {
  const { avatar, title, userId, ...rest } = userInfo.value;
  return rest;
});

const startEditing = () => {
  isEditing.value = true;
  const { userId, ...editableInfo } = userInfo.value;
  Object.assign(editForm, editableInfo);
};

const cancelEditing = () => {
  isEditing.value = false;
};

const saveChanges = async () => {
  try {
    const success = await saveUserInfo(JSON.parse(JSON.stringify(editForm)), userId.value);
    if (success) {
      Object.assign(storeUserInfo.value, editForm);
    }
  } catch (err) {
    message.error(err || "修改失败，请重试");
  }

  isEditing.value = false;
};
</script>

<style scoped>
.user-profile {
  max-width: 1200px;
  min-width: 1000px;
  min-height: 600px;
}

.profile-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  padding: 40px 20px;
  text-align: center;
  color: #fff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.avatar-wrapper {
  width: 180px;
  height: 180px;
  margin: 0 auto 20px;
  border-radius: 50%;
  padding: 8px;
  background-color: rgba(255, 255, 255, 0.2);
}

.user-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
}

.username {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 4px;
}

.user-title {
  font-size: 16px;
  opacity: 0.8;
  margin-bottom: 16px;
}

.user-tags {
  margin-bottom: 24px;
}

.user-tags :deep(.ant-tag) {
  margin: 0 4px;
  padding: 4px 8px;
  font-size: 14px;
}

.user-stats {
  display: flex;
  justify-content: space-around;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.stat-item h3 {
  font-size: 14px;
  font-weight: normal;
  opacity: 0.8;
  margin-bottom: 4px;
}

.stat-item p {
  font-size: 20px;
  font-weight: 600;
}

.info-card {
  height: 100%;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.card-title {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
}

.user-info {
  display: flex;
  flex-direction: column;
}

.info-item {
  margin-bottom: 16px;
  display: flex;
  align-items: baseline;
}

.info-label {
  font-weight: 500;
  color: #606266;
  width: 80px;
  flex-shrink: 0;
}

.info-value {
  color: #303133;
  margin-left: 16px;
}

.edit-form {
  margin-top: 16px;
}

.edit-form :deep(.ant-form-item) {
  margin-bottom: 16px;
}

.edit-form :deep(.ant-form-item-label) {
  padding-bottom: 4px;
}

.edit-form :deep(.ant-input) {
  border-radius: 4px;
}

.edit-form :deep(.ant-btn) {
  height: 40px;
  padding: 0 20px;
  font-size: 16px;
  border-radius: 4px;
}

.edit-button, .save-button, .cancel-button {
  border-radius: 6px;
}

.edit-button {
  background-color: #667eea;
  border-color: #667eea;
}

.edit-button:hover {
  background-color: #5a6edb;
  border-color: #5a6edb;
}

.save-button {
  margin-right: 12px;
}

@media (max-width: 768px) {
  .profile-card {
    margin-bottom: 24px;
  }

  .info-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .info-value {
    margin-left: 0;
    margin-top: 4px;
  }
}
</style>

